﻿@{
    Layout = "_LayoutH";
    @model List<DeviceData>
}
<div id="app" v-cloak>
    <form class="form-horizontal" onsubmit="return false">
        <div class="box-body">
            <div class="form-group">
                <label class="col-sm-2 control-label">站点名称</label>
                <div class="col-sm-10">
                    <input class="form-control" v-model="ClientName" type="text" disabled>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">设备名称</label>
                <div class="col-sm-10">
                    <input class="form-control" v-model="DeviceName" type="text" disabled>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">巡检人</label>
                <div class="col-sm-10">
                    <input class="form-control" v-model="Inspector" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">设备参数</label>
                <div class="col-sm-10">
                    <ul class="navbar-nav">
                        @{ 
                            for (int i = 0; i < Model.Count; i++)
                            {
                                if (Model[i].ParameterStatus == 0)
                                {
                                    <li class="nav-item label-success">@Model[i].ParameterName : @Model[i].ParameterValue</li>
                                }
                                else {
                                    <li class="nav-item label-danger"><span></span>@Model[i].ParameterName : @Model[i].ParameterValue</li>
                                }

                            }
                        }
                    </ul>
                </div>               
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">摄像头截图</label>
                <div class="col-sm-10">
                    <div style="display:flex;justify-content:center;">
                        @{
                            DeviceData deviceData = Model.Find(s => s.ParameterName == "摄像头截图");
                            <img src="../image/1.jpg" />
                        }
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">设备状态</label>
                <div class="col-sm-10">
                    <select class="form-control" v-model="IsNormal">
                        <option value="">请选择</option>
                        <option value="0">正常</option>
                        <option value="1">异常</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">备注</label>
                <div class="col-sm-10">
                    <textarea v-model="Remark" class="form-control" rows="4" placeholder="备注...100个字符以内"></textarea>
                    <p class="textarea-numberbar"><em class="textarea-length">{{count}}</em>/100</p>
                </div>
            </div>
        </div>
        <div class="box-footer">
            <div class="pull-right box-tools">
                <input v-on:click="addL" class="btn btn-primary radius" type="submit" v-model="submit">
            </div>
        </div>
    </form>
</div>

@section scripts{
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                submit: "确认",
                ClientId:"@ViewBag.ClientId",
                ClientName: "@ViewBag.ClientName",
                DeviceId:"@ViewBag.DeviceId",
                DeviceName: "@ViewBag.DeviceName",
                DeviceDatas:"@Html.Raw(Model)",
                Inspector:"",
                IsNormal: "",
                Remark: '',
            },
            computed: {
                count: function () {
                    return this.strLength(this.Remark, false);//描述信息字段长度计算
                }
            },
            mounted: function(){
                var _self = this;
                _self.$nextTick(function () {
                    _self.ClientName = replaceStr(_self.ClientName);
                    _self.DeviceName = replaceStr(_self.DeviceName);
                    //_self.$refs.Remark.clientWidth = _self.$refs.DeptName.clientWidth;
                });
            },
            methods: {
                addL: function () {
                    var _self = this;
                    if (_self.Inspector.length <= 0) {
                        layer.msg("巡检人不能为空", { icon: 2 });
                        return false;
                    }
                    if (_self.IsNormal.length <= 0) {
                        layer.msg("设备状态不能为空", { icon: 2 });
                        return false;
                    }

                    if (_self.Remark.length <= 0) {
                        layer.msg("备注不能为空", { icon: 2 });
                        return false;
                    }
                    var index = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    var data = {
                        ClientId: _self.ClientId,
                        DeviceId: _self.DeviceId,
                        Inspector: _self.Inspector,
                        IsNormal: _self.IsNormal,
                        Remark: _self.Remark
                    };
                    yui.$axiospostform('/Inspection/AddOrUpdate', data)
                        .then(function (response) {
                            if (response.data.Item1 === 101) {
                                layer.tips(response.data.Item2, '..layui-layer-setwin', {
                                    tips: [1, '#3595CC'],
                                    time: 3000
                                });
                                layer.close(index);
                                return false;
                            }
                            if (response.data.Item1) {
                                layer.msg(response.data.Item2, { icon: 1, time: 1000 });
                                setTimeout(function () {
                                    yui.layer_close3();
                                }, 500);
                            } else {
                                layer.msg(response.data.Item2 || errorMsg, { icon: 5 });
                            }
                            layer.close(index);
                            //parent.app.searchL();
                        })
                        .catch(function (error) {
                            layer.close(index);
                        });
                }
            }
        });
        function replaceStr(str) {
            str = str.replace(/%3A/g, ":");
            str = str.replace(/%2F/g, "/");
            str = str.replace(/%3F/g, "?");
            str = str.replace(/%3D/g, "=");
            str = str.replace(/%26/g, "&");
            str = str.replace(/%2B/g, "+");
            str = str.replace(/%20/g, " ");
            str = str.replace(/%23/g, "#");
            return str;
        }
    </script>
}